<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<title>预约美发</title>
<script type="text/javascript">
	$(".app-emp-list li").on("click", function() {
		$(".app-emp-list").addClass("am-hide");
		$(".app-emp-detail").removeClass("am-hide");
	});
	$(".app-emp-detail button").on("click", function() {
		$(".app-emp-list").removeClass("am-hide");
		$(".app-emp-detail").addClass("am-hide");
	});
	$("#date-modal").on("opened.modal.amui", function() {
		$("#date-modal").css({"bottom":"0","margin-top":"0"});
	});
	$(".app-date-selector").datepicker({format: "yyyy-mm"});
</script>
</head>

<body>
	<form class="am-form am-form-horizontal" action="">
		<h3 class="app-title">预约选项</h3>
		<div class="am-g am-padding-sm">
			<div class="am-u-sm-6">
				<h3 class="am-text-blue am-margin-bottom-xs">选择门店</h3>
				<select data-am-selected="{btnWidth: '100%',btnStyle: 'secondary'}">
					<option value="a">首山店</option>
					<option value="b">省府店</option>
				</select>
			</div>
		</div>
		<h3 class="app-title">选择美发师</h3>
		<div class=" app-emp-list">
			<ul class="am-list am-list-static am-margin-vertical-xs">
				<li><img src="assets/img/avatar.png">周华健<span class="am-text-sm">高级发型师</span></li>
				<li><img src="assets/img/avatar.png">阿航<span class="am-text-sm">发型师</span></li>
				<li><img src="assets/img/avatar.png">可乐<span class="am-text-sm">总监</span></li>
				<li><img src="assets/img/avatar.png">邓红棋<span class="am-text-sm">美容师</span></li>
			</ul>
			<p class="app-warn am-text-xs am-padding-sm">
				提醒：为了更好的为您服务，请输入您的手机号码，系统将对您的手机号做保密处理。
			</p>
		</div>
		<div class="app-emp-detail am-g am-padding-sm am-hide">
			<div class="am-u-sm-4 am-text-center">
				<img src="assets/img/avatar.png">
			</div>
			<div class="am-u-sm-8 am-u-end">
				<h3 class="am-text-blue am-margin-0">周华健<small class="am-padding-left-xs am-text-black">高级发型师</small></h3>
				<p class="am-text-xs am-text-grey am-margin-0">7年美发经验，资深发型设计师，擅长女性时尚发型设计</p>
				<button class="am-btn am-btn-default am-btn-sm am-radius" type="button">重新选择</button>
				<button class="am-btn am-btn-landiao am-btn-sm am-radius" data-am-modal="{target:'#doc-modal'}" type="button">查看作品</button>
			</div>
		</div>
		<h3 class="app-title">填写预约信息</h3>
		<hr class="am-margin-vertical-xs">
		<div class="am-form-group am-margin-0">
			<label for="date" class="am-u-sm-3 am-form-label">日期</label>
			<div class="am-u-sm-8 am-u-end">
				<input type="text" id="date" placeholder="请选择预约日期" data-am-modal="{target:'#date-modal'}" readonly="readonly">
			</div>
		</div>
		<hr class="am-margin-vertical-xs">
		<div class="am-form-group">
			<label for="date" class="am-u-sm-3 am-form-label">项目</label>
			<div class="am-u-sm-8 am-u-end">
				<select data-am-selected="{btnWidth: '100%'}">
					<option value="a">首山店</option>
					<option value="b">省府店</option>
				</select>
			</div>
		</div>
		<div class="am-form-group"><div class="am-u-sm-12 am-text-center"><button class="am-btn am-btn-landiao am-radius am-padding-horizontal-lg" type="submit">提交</button></div></div>
	</form>
	<div class="am-modal am-modal-landiao app-production-modal am-modal-no-btn" tabindex="-1" id="doc-modal">
		<div class="am-modal-dialog">
			<div class="am-modal-hd">周华健的作品<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a></div>
			<div class="am-modal-bd">
				<ul class="am-avg-sm-2">
					<li><img src="assets/img/pic1.png" /></li>
					<li><img src="assets/img/pic2.png" /></li>
					<li><img src="assets/img/pic3.png" /></li>
					<li><img src="assets/img/pic4.png" /></li>
					<li><img src="assets/img/pic1.png" /></li>
					<li><img src="assets/img/pic2.png" /></li>
					<li><img src="assets/img/pic3.png" /></li>
					<li><img src="assets/img/pic4.png" /></li>
				</ul>
			</div>
		</div>
	</div>
	<div class="am-modal am-modal-landiao app-date-modal am-modal-no-btn" tabindex="-1" id="date-modal">
		<div class="am-modal-dialog">
			<div class="am-modal-hd">请选择时段<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a></div>
			<div class="am-modal-bd am-padding-0">
				<div data-am-widget="tabs" class="am-tabs am-tabs-default am-margin-0">
					<ul class="am-tabs-nav am-cf">
						<li class="am-active"><a href="[data-tab-panel-0]">今天</a></li>
						<li class=""><a href="[data-tab-panel-1]">明天</a></li>
						<li class=""><a href="[data-tab-panel-2]">选择日期</a></li>
					</ul>
					<div class="am-tabs-bd">
						<div data-tab-panel-0 class="am-tab-panel am-active">
							<div class="am-btn-group" data-am-button>
								<label class="am-btn am-btn-default am-btn-sm am-active"><input type="radio" name="timebucket" checked="checked">上午<br>10:00 - 12:00</label>
								<label class="am-btn am-btn-default am-btn-sm"><input type="radio" name="timebucket">下午<br>10:00 - 12:00</label>
								<label class="am-btn am-btn-default am-btn-sm"><input type="radio" name="timebucket">晚上<br>10:00 - 12:00</label>
							</div>
							<div class="am-btn-group am-margin-top" data-am-button>
								<label class="am-btn am-btn-default am-disabled am-btn-xs"><input type="radio" name="tam">10:00<br>过时</label>
								<label class="am-btn am-btn-default am-disabled am-btn-xs"><input type="radio" name="tam">10:30<br>过时</label>
								<label class="am-btn am-btn-default am-btn-xs"><input type="radio" name="tam">11:00<br>&nbsp;</label>
								<label class="am-btn am-btn-default am-btn-xs"><input type="radio" name="tam">11:30<br>&nbsp;</label>
								<label class="am-btn am-btn-default am-btn-xs"><input type="radio" name="tam">12:00<br>&nbsp;</label>
							</div>
						</div>
						<div data-tab-panel-1 class="am-tab-panel">
							<div class="am-btn-group" data-am-button>
								<label class="am-btn am-btn-default am-btn-sm am-active"><input type="radio" name="timebucket1" checked="checked">上午<br>10:00 - 12:00</label>
								<label class="am-btn am-btn-default am-btn-sm"><input type="radio" name="timebucket1">下午<br>10:00 - 12:00</label>
								<label class="am-btn am-btn-default am-btn-sm"><input type="radio" name="timebucket1">晚上<br>10:00 - 12:00</label>
							</div>
							<div class="am-btn-group am-margin-top" data-am-button>
								<label class="am-btn am-btn-default am-btn-xs"><input type="radio" name="tam">11:00<br>&nbsp;</label>
								<label class="am-btn am-btn-default am-btn-xs"><input type="radio" name="tam">11:30<br>&nbsp;</label>
								<label class="am-btn am-btn-default am-btn-xs"><input type="radio" name="tam">12:00<br>&nbsp;</label>
								<label class="am-btn am-btn-default am-btn-xs"><input type="radio" name="tam">12:30<br>&nbsp;</label>
								<label class="am-btn am-btn-default am-btn-xs"><input type="radio" name="tam">13:00<br>&nbsp;</label>
								<label class="am-btn am-btn-default am-btn-xs"><input type="radio" name="tam">11:00<br>&nbsp;</label>
								<label class="am-btn am-btn-default am-btn-xs"><input type="radio" name="tam">11:30<br>&nbsp;</label>
								<label class="am-btn am-btn-default am-btn-xs"><input type="radio" name="tam">12:00<br>&nbsp;</label>
								<label class="am-btn am-btn-default am-btn-xs"><input type="radio" name="tam">12:30<br>&nbsp;</label>
								<label class="am-btn am-btn-default am-btn-xs"><input type="radio" name="tam">13:00<br>&nbsp;</label>
							</div>
						</div>
						<div data-tab-panel-1 class="am-tab-panel">
							<div class="app-date-selector"></div>
							<div class="am-btn-group" data-am-button>
								<label class="am-btn am-btn-default am-btn-sm am-active"><input type="radio" name="timebucket1" checked="checked">上午<br>10:00 - 12:00</label>
								<label class="am-btn am-btn-default am-btn-sm"><input type="radio" name="timebucket1">下午<br>10:00 - 12:00</label>
								<label class="am-btn am-btn-default am-btn-sm"><input type="radio" name="timebucket1">晚上<br>10:00 - 12:00</label>
							</div>
							<div class="am-btn-group am-margin-top" data-am-button>
								<label class="am-btn am-btn-default am-btn-xs"><input type="radio" name="tam">11:00<br>&nbsp;</label>
								<label class="am-btn am-btn-default am-btn-xs"><input type="radio" name="tam">11:30<br>&nbsp;</label>
								<label class="am-btn am-btn-default am-btn-xs"><input type="radio" name="tam">12:00<br>&nbsp;</label>
								<label class="am-btn am-btn-default am-btn-xs"><input type="radio" name="tam">12:30<br>&nbsp;</label>
								<label class="am-btn am-btn-default am-btn-xs"><input type="radio" name="tam">13:00<br>&nbsp;</label>
								<label class="am-btn am-btn-default am-btn-xs"><input type="radio" name="tam">11:00<br>&nbsp;</label>
								<label class="am-btn am-btn-default am-btn-xs"><input type="radio" name="tam">11:30<br>&nbsp;</label>
								<label class="am-btn am-btn-default am-btn-xs"><input type="radio" name="tam">12:00<br>&nbsp;</label>
								<label class="am-btn am-btn-default am-btn-xs"><input type="radio" name="tam">12:30<br>&nbsp;</label>
								<label class="am-btn am-btn-default am-btn-xs"><input type="radio" name="tam">13:00<br>&nbsp;</label>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
